<template>
    <div id="app">
        <vue-particles
            color="#fff"
            :particleOpacity="0.8"
            :particlesNumber="100"
            shapeType="circle"
            :particleSize="5"
            linesColor="#fff"
            :linesWidth="1"
            :lineLinked="true"
            :lineOpacity="0.6"
            :linesDistance="150"
            :moveSpeed="2"
            :hoverEffect="true"
            hoverMode="grab"
            :clickEffect="true"
            clickMode="push"
            class="lizi"
        >
        </vue-particles>
        <div id="top" style="position:absolute;top:0;left:0"></div>
        <Header class="app-header" :windowFlag="windowFlag"></Header>
        <div class="app-body" id="app-body">
            <router-view :windowFlag="windowFlag"></router-view>
        </div>
        <Footer class="app-footer"></Footer>
        <a-back-top />
        <a-modal title="温馨提示" v-model="visible" @ok="handleOk">
            <p>若页面无数据，是因为博主服务器带宽太小，加载过慢</p>
            <p>若出现以上问题，建议刷新网站</p>
            <p>若还是无法解决，建议打开浏览器缓存后刷新</p>
            <p>IE浏览器暂时无法加载此网站</p>
            <p>
                该项目已开源：<a
                    href="https://gitee.com/admin_yys/blog"
                    target="_block"
                    >https://gitee.com/admin_yys/blog</a
                >
            </p>
        </a-modal>
    </div>
</template>

<script>
//使用懒加载模式导入组件
const Header = () => import("./views/Header");
const Footer = () => import("./views/Footer");

//引入jquery
//import $ from "jquery";

export default {
    name: "App",
    components: {
        Header,
        Footer,
    },
    data() {
        return {
            //默认宽屏
            windowFlag: true,
            heightFlag: "",
            visible: false,
        };
    },
    watch: {
        $route(to,from) {
            let topView = document.querySelector("#top");
            topView.scrollIntoView();
            console.log(to,from);
        },
    },
    //页面挂载完成回调方法
    mounted() {
        //获取浏览器宽度
        let w =
            document.documentElement.offsetWidth || document.body.offsetWidth;
        if (w <= 1100) {
            this.windowFlag = false;
        }
        window.onresize = function () {
            let w2 =
                document.documentElement.offsetWidth ||
                document.body.offsetWidth;
            if (w > 1100) {
                if (w > w2 && w2 <= 1100) {
                    this.windowFlag = false;
                    document.location.reload();
                }
            } else {
                if (w <= w2 && w2 > 1100) {
                    this.windowFlag = true;
                    document.location.reload();
                }
            }
            w = w2;
        };
        //判断内容时候大于浏览器宽度
        this.heightFlag = this.hasScrollbar();
        this.showModal();
    },
    methods: {
        showModal() {
            this.visible = true;
        },
        handleOk() {
            this.visible = false;
        },
        hasScrollbar() {
            return (
                document.body.scrollHeight >
                (window.innerHeight || document.documentElement.clientHeight)
            );
        },
    },
};
</script>

<style lang='less'>
body {
    //background: rgb(245, 245, 245);
    background: rgb(0, 0, 0);
}
* {
    ::-webkit-scrollbar {
        background: linear-gradient(to bottom);
        width: 5px;
        height: 5px;
    }
    /* 滚动条的滑块 */
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.6),
            rgba(255, 255, 255, 0.6)
        );
        border-radius: 3px;
    }
    margin: 0;
    padding: 0;
}
#app {
    height: auto;
    font-family: KaiTi;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    .lizi {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        @media (min-width: 1100px) {
            //background-image: url("./assets/img/bck.jpg");
            background-repeat: no-repeat;
        }
    }
    .app-body {
        overflow: hidden;
        margin: 70px 0 20px;
    }
    .app-footer {
        position: relative;
    }
    .app-footer2 {
        position: fixed;
        bottom: 0;
    }
}
@keyframes menuOFF {
    from {
        left: 0;
    }
    to {
        left: -500px;
    }
}
@-webkit-keyframes menuOFF {
    from {
        left: 0;
    }
    to {
        left: -500px;
    }
}
@keyframes menuON {
    from {
        left: -500px;
    }
    to {
        left: 0px;
    }
}
@-webkit-keyframes menuON {
    from {
        left: -500px;
    }
    to {
        left: 0px;
    }
}
</style>
